<template>
	<topbar ref="topbar" :menus="storages" />
  <el-container style="height: 100%">
    <el-aside width="200px" class="left-menu" >
      <el-menu :default-active="leftMenuActive"  router>
        <el-menu-item v-for="menu in leftMenus" :key="menu.path" :index="menu.path">
          <el-icon><component :is="menu.icon"></component></el-icon>
          <span>{{ menu.title }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
  
    <el-main style="height: calc(100% - 65px)">
      <router-view @upload-action="onUploadClick"></router-view>
    </el-main>
  </el-container>
  
</template>

<script>
import topbar from "@/components/wpan/topbar/index.vue";
import storages from '@/data/storage.js'

export default{
	components: {
	  topbar,
	},
	
	data(){
		return{
			storages:storages

		}
	},
  computed: {
    currentBucket() {
      return this.$route.params.sname;
    },
    leftMenuActive() {
      return this.$route.fullPath;
    },
    leftMenus() {
      let menus = [
        { path: `/wpan/${this.currentBucket}`, icon: "el-icon-document", title: "全部文件" },
        { path: `/wpan/${this.currentBucket}?type=doc`, icon: "el-icon-xx", title:"文档"},
        { path: `/wpan/${this.currentBucket}?type=pic`, icon: "el-icon-xx", title: "图片" },
        { path: `/wpan/${this.currentBucket}?type=audio`, icon: "el-icon-xx", title: "音频"},
        { path: `/wpan/${this.currentBucket}?type=video`, icon: "el-icon-xx", title: "视频" },
        { path: `/wpan/${this.currentBucket}/share`, icon: "el-icon-share", title: "我的分享" },
        { path: `/wpan/${this.currentBucket}/recyclebin`, icon: "el-icon-delete", title: "回收站" },
      ];
   
      return menus;
    },
  },
  method:{  
    
  },
	beforeRouteEnter(to, from, next) {	  
	    // 如果访问的是首页则自动跳去第一个存储空间
	    next(_self=>{
        if (to.path == "/wpan") {
          _self.$router.push({ path: `/wpan/${_self.storages[0].name}` });
          return;
        }
      });
	},
	
}

</script>

<style lang="scss">
  
.left-menu {
  width: 200px;
  height: 100%;
  background-color: #f4f4f5;
}
.el-main {
  padding: 10px !important; 
}

/* 右侧边栏样式 */
.el-aside .el-menu {
  border-right: solid 1px #fff;
  font-weight: 500;
  background-color:#f4f4f5;
}

.el-aside .el-menu-item:focus,
.el-aside .el-menu-item:hover {
  outline: 0;
  background-color: #eaeaea !important;
}


@media (max-width: 480px) {
  .left-menu {
    width: 0 !important;
  }
}
</style>